<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赤道团队官网</title>
    <!-- 引入ico图标 -->
    <link rel="shortcut icon" href="bitbug_favicon (2).ico" />
    <!-- 引入css -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入初始化框架 -->
    <link rel="stylesheet" href="css/normal.css">
    <!-- 引入swiper -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>

<body>
    <!-- 顶部开始 -->
    <header>
        <div class="h_l">
            <img src="images/logo.png" alt="">
        </div>
        <div class="h_m">
            <h3>普歌-赤道团队</h3>
        </div>
        <div class="h_r">
            <a href="#" target="blank" class="h_login">
                <p>登录</p>
            </a>
            <a href="#" target="blank" class="h_signin">
                <p>注册</p>
            </a>
        </div>
    </header>
    <!-- 顶部结束 -->
    <main>
        <!-- 轮播图开始 -->
        <nav>
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="upload/lb1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="upload/lb2.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="upload/lb3.jpg" alt="">
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </nav>
        <!-- 轮播图结束 -->
        <!-- 团队介绍开始 -->
        <div class="speak" id="fanhui1">
            <h3>赤道简介</h3>
            <h4>队长:关鹏燕 队员:李晓林 刘港辉</h4>
            <p>团队介绍:赤道团队孕育于普歌大数据研发基地,类属于前端集群，是一支凝聚力强,技术过硬的团队,取名赤道含义该团队像赤道一样发光发热,提升自己的同时感染其他人</p>
            <p>logo含义:赤道团队logo由地球,赤道线,中英文队名及许多小方块组成,地球是宏观主体,赤道线是主体的主要元素,地球周围有许多小方块，寓意团结,整个logo宏观大气,兼顾logo的同时联想整个地球,大气的同时接地气,足见制作者的用心良苦。</p>
        </div>
        <!-- 团队介绍结束 -->
        <!-- 自我介绍开始 -->
        <div class="myself" id="fanhui3">
            <div class="g">
                <div class="my_p">
                    <img src="upload/g.jpg" alt="关鹏燕">
                </div>
                <div class="my_s">
                    <h3>关鹏燕</h3>
                    <p>前端组成人员,赤道团队队长</p>
                    <p>是一位00后选手,喜欢日出日落时分的璀璨,人美心善,将与你共同进步</p>
                    <p>人生格言:别让怯弱否定了自己，别让懒惰耽误了青春！</p>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            60%
                        </div>
                    </div>
                    <span class="hi">
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                    </span>
                </div>
            </div>
            <div class="l">
                <div class="my_s">
                    <h3>李晓琳</h3>
                    <p>前端组成人员,赤道团队队员</p>
                    <p>标准的铁憨憨,已有对象,单身狗不要做无用功</p>
                    <p>人生格言:男儿不展凌云志，空负天生八尺躯！</p>
                    <div class="progress tebie">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            60%
                        </div>
                    </div>
                    <span class="hi">
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                    </span>
                </div>
                <div class="my_p">
                    <img src="upload/l.jpg" alt="李晓琳">
                </div>
            </div>
            <div class="h">
                <div class="my_p">
                    <img src="upload/h.jpg" alt="刘港辉">
                </div>
                <div class="my_s">
                    <h3>刘港辉</h3>
                    <p>前端组成人员,赤道团队队员</p>
                    <p>00后小哥哥,可盐可甜,喜欢拍风景照,偶尔滑一滑滑板,喜欢搞笑</p>
                    <p>人生格言:我们的征途是星辰大海</p>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            60%
                        </div>
                    </div>
                    <span class="hi">
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                    </span>
                </div>
            </div>
        </div>
        <!-- 自我介绍结束 -->
        <!-- 二维码开始 -->
        <div class="ewm">
            <div class="wei">
                <h3>加我微信</h3>
                <img src="images/g.png" alt="">
                <img src="images/l.png" alt="">
                <img src="images/h.png" alt="">
            </div>
            <div class="qq">
                <h3>加我QQ</h3>
                <img src="images/gq.png" alt="">
                <img src="images/lq.png" alt="">
                <img src="images/hq.png" alt="">
            </div>
        </div>
        <!-- 二维码结束 -->
    </main>
    <footer>
        <div class="h_w">
            <div class="f1">
                <ul>
                    <h3>关于普歌</h3>
                    <li>
                        <a href="#" target="blank">普歌官网</a>
                    </li>
                    <li>
                        <a href="#" target="blank">普歌小程序</a>
                    </li>
                    <li>
                        <a href="#" target="blank">普歌APP</a>
                    </li>
                    <li>
                        <a href="#" target="blank">普歌微信</a>
                    </li>
                </ul>
            </div>
            <div class="f2">
                <ul>
                    <h3>关于赤道</h3>
                    <li>
                        <a href="#fanhui1">团队介绍</a>
                    </li>
                    <li>
                        <a href="#fanhui2">团队logo</a>
                    </li>
                    <li>
                        <a href="#fanhui3">团队人员</a>
                    </li>
                </ul>
            </div>
            <div class="f3">
                <ul>
                    <h3>发现</h3>
                    <li>
                        <a href="#fanhui3" target="blank">关鹏燕</a>
                    </li>
                    <li>
                        <a href="#fanhui3" target="blank">李晓琳</a>
                    </li>
                    <li>
                        <a href="#fanhui3" target="blank">刘港辉</a>
                    </li>
                </ul>
            </div>
            <div class="f4">
                <ul>
                    <h3>作品展览</h3>
                    <li>
                        <a href="#" target="blank">自我介绍</a>
                    </li>
                    <li>
                        <a href="#" target="blank">锤子</a>
                    </li>
                    <li>
                        <a href="#" target="blank">品优购</a>
                    </li>
                </ul>
            </div>
            <div class="f5">
                <ul>
                    <h3>前端路线</h3>
                    <li>
                        <a href="#" target="blank">HTML</a>
                    </li>
                    <li>
                        <a href="#" target="blank">CSS</a>
                    </li>
                    <li>
                        <a href="#" target="blank">Web</a>
                    </li>
                    <li>
                        <a href="#" target="blank">JS</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="h_f">
            <div class="h_f_l">
                <a href="#">联系我们</a>
                <a href="#">法律声明</a>
                <a href="#">隐私保护</a>
                <a href="#">了解更多</a>
            </div>
            <div class="h_f_r">
                <span>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </span>
            </div>
        </div>
    </footer>
    <!-- 引入js效果 -->
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                type: 'progressbar',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>

</html>